@import './source.scss';

.panel6 {
    .bg {
        filter: blur(.2em);
        position: absolute;
        background-image: url('../img/img1.jpg');
        background-size: cover;
        background-position: center;
        z-index: -1;
        width: 100%;
        height: 100vh;
    }

    color: #f0f0f0;
    background-color: rgba($color: #000000, $alpha: 0.4);
    text-align: center;

    >.title {
        font-weight: 400;
        margin: 5vh 3vw;
        font-size: 42px;
    }

    >.item {
        font-size: 25px;
        margin: 2vh 3vw;

        @media(max-width: $media-screen-width) {
            font-size: 20px;
        }
    }
    >.line ,>.line>a{
        color: #f0f0f0;
        font-size: 20px;
        margin: 2vh 3vw;
        @media(max-width: $media-screen-width) {
            font-size: 18px;
        }
    }

    >.continue {
        height: 40vh;
        display: flex;
        flex-direction: row;
        align-items: center;

        >.card {
            height: 100%;
            flex: 1;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;

            &:nth-child(1) {
                background-image: url('../img/react-logo.svg');
            }

            &:nth-child(2) {
                background-image: url('../img/vue-logo.png');
            }

            &:nth-child(3) {
                background-image: url('../img/angular-logo.svg');
            }
        }
    }
}